<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="searchForm">
        <!--      类型-->
        <el-form-item label="故障状态:">
          <el-select v-model="searchForm.type" value-key="id" placeholder="选择线索类型">
            <el-option v-for="(item,index) in type" :label="item" :key="index" :value="index"></el-option>
          </el-select>
        </el-form-item>
        <!--状态-->
        <el-form-item label="紧急程度:">
          <el-select v-model="searchForm.state" value-key="id" placeholder="选择线索状态">
            <el-option v-for="item in state" :label="item.name" :key="item.id" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编号:">
          <el-input placeholder="故障编号" v-model="searchForm.id"></el-input>
        </el-form-item>
        <el-form-item label="上报姓名:">
          <el-input placeholder="请输入姓名" v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item label="上报电话:">
          <el-input placeholder="请输入电话" v-model="searchForm.phone"></el-input>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="Search">查询</el-button>
          <el-button type="success" @click="Reset">重置</el-button>

        </el-form-item>
      </el-form>
    <el-table :data="record"   style="width: 100%;" border
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}">
      <el-table-column
          prop="faultNo"
          label="故障编号"
          width="90"
      >
      </el-table-column>
      <el-table-column
          prop="faultStatus"
          label="故障状态"
          width="90"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.faultStatus==0">未签收</span>
          <span v-if="scope.row.faultStatus==1">已签收</span>
          <span v-if="scope.row.faultStatus==2">维修中</span>
          <span v-if="scope.row.faultStatus==3">维修完成</span>
        </template>
      </el-table-column>
      <el-table-column
          prop="sendTime"
          label="上报时间"
          width="170"
      >
      </el-table-column>
      <el-table-column
          prop="degreeUrgency"
          label="紧急程度"
          width="90"
      >
      </el-table-column>
      <el-table-column
          prop="reporterName"
          label="上报姓名"
          width="90"
      >
      </el-table-column>
      <el-table-column
          prop="reporterPhone"
          label="上报电话"
          width="120"
      >
      </el-table-column>
      <el-table-column
          prop="reporterBelong"
          label="所属单位"
          width="150"
      >
      </el-table-column>
      <el-table-column
          prop="faultType"
          label="设备类型"
          width="90"
      >
      </el-table-column>
      <el-table-column
          prop="faultBrand"
          label="设备品牌"
          width="90"
      >
      </el-table-column>
      <el-table-column
          prop="faultModel"
          label="设备型号"
          width="90"
      >
      </el-table-column>
      <el-table-column
          prop="faultDescribe"
          label="设备描述"
          width="100"
      >
      </el-table-column>
      <el-table-column
          prop="reporterBelong"
          label="安放位置"
          width="90"
      >
      </el-table-column>
      <el-table-column
          label="设备图片"   width="120" >
        <template slot-scope="scope">
          <el-image
              style="width: 80px; height: 50px"
              :src="'resources/template/'+scope.row.equipPicture1"
             <!-- :preview-src-list="scope.row.imgList" -->

          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作"   width="200" >
        <template v-slot="scope">
          <el-button type="danger" size="small"  @click="dele(scope.row)">删除</el-button>
          <el-button type="info" size="small"  @click="Faultbtn(scope.row)">故障状态</el-button>
        </template>
      </el-table-column>
    </el-table>
      <!--    分页-->
      <div class="block" style="margin-top: 20px">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="pagesize"
            :current-page="pagenum"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
  </el-card>
    <el-dialog title="选择故障状态" :visible.sync="Faultdialog"  width="30%">
      <el-form :model="Faultform">
        <el-form-item label="故障状态">
          <el-select v-model="Faultform.fault"  value-key="id" placeholder="选择故障状态">
            <el-option v-for="(item,index) in type" :label="item" :key="index" :value="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Faultdialog = false">取 消</el-button>
        <el-button type="primary" @click="FaultSub">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Fault",
  data(){
    return{
      judge: false,
      pagenum: 1,
      pagesize: 7,
      total: 0,
      //'待签收', '已签收', '维修中', '维修完成'
      type:[
      '未签收',
     '已签收',
        '维修中',
        '维修完成',
      ],

      state: [
        {id: 0, name: '加急'},
        {id: 1, name: '紧急'},
        {id: 2, name: '正常'},
        {id: 3, name: '待查'},
      ],
      Faultdialog:false,
      Faultform:{
        id: 0,
        fault:''
      },
      searchForm:{
        name: '',
        phone: "",
        id: '',
        type: "",
        state: '',
      },
      record:[
      ]
    }
  },
  created() {
    this.getAllFaultList()
  },
  methods:{
    Reset() {
      this.judge=false
      this.searchForm={
        name: '',
        phone: "",
        id: '',
        type: "",
        state: '',
      }
      this.getAllFaultList()
    },
    getAllFaultList(){
      this.$axios({
        method: 'post',
        url: '/api/webFaultReporting/getWxFaultListData',
        headers: {
          'Content-type': 'application/json',
        },
        params:{
          curPage:this.pagenum,
          pageSize:this.pagesize,
        }
      }).then(res => {
        console.log(res);
        this.record = res.data
        this.total=res.data.count
      })
    },
    //故障状态提交
    FaultSub(){
      console.log(this.Faultform)
      this.$axios({
        method: "post",
        url: "/api/webFaultReporting/editWebFaultReportingByNo",
        headers: {
          'Content-type': 'application/json',
        },
        params:{
          faultNo:this.Faultform.id,
          faultStatus:this.Faultform.fault,//状态
        }
      }).then((res)=>{
        console.log(res)
        if(res.status==200){
          this.$message.success('状态修改成功')
          this.Faultdialog=false
     this.getAllFaultList();

        }
      }).catch((err)=>{
        this.$message.error(err)
      })
    },
    //分页
    handleSizeChange(val){
      this.pagesize=val
      if(this.judge==true){
        this.Search()
      }else{
        this.getAllClueList();
      }
    },
    handleCurrentChange(val){
      this.pagenum=val
      if(this.judge==true){
        this.Search()
      }else{
        this.getAllClueList();
      }
    },
    //修改故障状态
    Faultbtn(row){
      console.log(row)
      this.Faultform.id=JSON.parse(JSON.stringify(row.faultNo))
      this.Faultform.fault=this.type[row.faultStatus]
   this.Faultdialog=true
    },
    Search(){
      this.judge=true
      console.log(this.searchForm)
      this.$axios({
        method: "post",
        url: "/api/webFaultReporting/getFaultList",
        headers: {
          'Content-type': 'application/json',
        },
        params:{
          faultNo:this.searchForm.id,
          reporterName:this.searchForm.name,
          reporterPhone:this.searchForm.phone,
          faultStatus:this.searchForm.type,//状态
          degreeUrgency:this.searchForm.state,//紧急程度
          curPage: this.pagenum,
          pageSize: this.pagesize,

        }
      }).then((res)=>{
        console.log(res)
        if(res.status==200){
          this.$message.success('查询成功')
          this.record = res.data.data
          this.total=res.data.count
        }
      }).catch((err)=>{
        this.$message.error(err)
      })
    },
    //删除照片
    dele(row){

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(()=>{
        this.$axios({
          method:'post',
          url:'/api/webFaultReporting/deleteByNo',
          params: {
            faultNo: row.faultNo
          }
        }).then((res)=>{
          if(res.data.code==1){
            this.$message.success("删除成功")
            this.getAllFaultList()
          }else {
            this.$message.error("网络错误")
          }
        }).catch((err)=>{
          this.$message.error(err)
        })
          })
          .catch(()=>{
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          })
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 20px;
}
.el-color-picker__icon, .el-input, .el-textarea {
  display: inline-block;

}
</style>
